<template>
  <div id="c_sortlist">                                      
    <div style="z-index:500;"><!--  style="width:850px" -->
      <div v-for="(group, indexg) in menuBase" :key="indexg" style="width: 100%;overflow:scroll;-webkit-overflow-scrolling:touch;">
        <tab ref="listenBar" bar-active-color="#668599" :line-width="0">
          <tab-item active-class="active-tab" :selected="it.key !=undefined && menuSelect[indexg] === it.key" :disabled="it.key==undefined&&it.id==undefined" @on-item-click="onTab(indexg,it)" :value="it" v-for="(it, index) in group" :key="index">{{it.name||it.title}}</tab-item>  
        </tab>
      </div>
      <div :key="4" style="width: 100%;overflow:scroll;-webkit-overflow-scrolling:touch;">
        <tab ref="listenBarT" bar-active-color="#668599" :line-width="0">
          <tab-item active-class="active-tab" :selected="it.key !=undefined && menuSelect[4] === it.key" :disabled="it.key==undefined" @on-item-click="onTab(4,it)" :value="it" v-for="(it, index) in menuTime" :key="index">{{it.name}}</tab-item>  
        </tab>
      </div>
      <div :key="5" style="width: 100%;overflow:scroll;-webkit-overflow-scrolling:touch;">
        <tab ref="listenBarU" bar-active-color="#668599" :line-width="0">
          <tab-item active-class="active-tab" :selected="it.key !=undefined && menuSelect[5] === it.key" :disabled="it.key==undefined" @on-item-click="onTab(5,it)" :value="it" v-for="(it, index) in menuUsed" :key="index">{{it.name}}</tab-item>  
        </tab>
      </div>
      <div :key="6" style="width: 100%;overflow:scroll;-webkit-overflow-scrolling:touch;">
        <tab ref="listenBarP" bar-active-color="#668599" :line-width="0">
          <tab-item active-class="active-tab" :selected="it.id !=undefined && menuSelect[6] === it.id" :disabled="it.key==undefined&&it.id==undefined" @on-item-click="onTab(6,it)" :value="it" v-for="(it, index) in menuProjs" :key="index">{{it.name ||it.title.substr(0,4)}}</tab-item>  
        </tab>
      </div>
    </div> <!-- -->
    <div @click.navive='stateA = false' v-show="listshow && stateA" class="vux-sticky vux-fixed" style="top:0px;z-index:498;height:25px;line-height: 28px;">
        <div class="sortshow border">{{selectedLabel}}</div> <!--  • {{type2}} • {{type3}} -->
    </div>
    <transition name="packup">
        <div @click.navive='stateA = true' v-show="listshow && !stateA" class="vux-sticky vux-fixed" style="top:0px;z-index:499;height:224px;">
            <div v-for="(group, indexg) in menuBase" :key="indexg" style="width: 100%;overflow:scroll;-webkit-overflow-scrolling:touch;">
              <tab ref="listenBarB" bar-active-color="#668599" :line-width="0">
                <tab-item active-class="active-tab" :selected="it.key !=undefined && menuSelect[indexg] === it.key" :disabled="it.key==undefined&&it.id==undefined" @on-item-click="onTab(indexg,it)" :value="it" v-for="(it, index) in group" :key="index">{{it.name||it.title}}</tab-item>  
              </tab>
            </div>
            <div :key="4" style="width: 100%;overflow:scroll;-webkit-overflow-scrolling:touch;">
              <tab ref="listenBarBT" bar-active-color="#668599" :line-width="0">
                <tab-item active-class="active-tab" :selected="it.key !=undefined && menuSelect[4] === it.key" :disabled="it.key==undefined" @on-item-click="onTab(4,it)" :value="it" v-for="(it, index) in menuTime" :key="index">{{it.name}}</tab-item>  
              </tab>
            </div>
            <div :key="5" style="width: 100%;overflow:scroll;-webkit-overflow-scrolling:touch;">
              <tab ref="listenBarBU" bar-active-color="#668599" :line-width="0">
                <tab-item active-class="active-tab" :selected="it.key !=undefined && menuSelect[5] === it.key" :disabled="it.key==undefined" @on-item-click="onTab(5,it)" :value="it" v-for="(it, index) in menuUsed" :key="index">{{it.name}}</tab-item>  
              </tab>
            </div>
            <div :key="6" style="width: 100%;overflow:scroll;-webkit-overflow-scrolling:touch;">
              <tab ref="listenBarBP" bar-active-color="#668599" :line-width="0">
                <tab-item active-class="active-tab" :selected="it.id !=undefined && menuSelect[6] === it.key" :disabled="it.key==undefined&&it.id==undefined" @on-item-click="onTab(6,it)" :value="it" v-for="(it, index) in menuProjs" :key="index">{{it.name||it.title.substr(0,4)}}</tab-item>  
              </tab>
            </div>
        </div>
    </transition>
  </div>
</template>
<script>

import stickySort from './stickySort'
import {basemenu,pricemenu} from './menu_sort'

import api from '../api';
import { taskAndTag  } from "./mixin";
import { mapState, mapActions} from 'vuex'

import {
    Tab,TabItem,Sticky,
    TransferDomDirective as TransferDom
} from 'vux'
var keyNameDic = {} ;

export default {
    directives: {
        TransferDom
    },
    components: {
      Tab,TabItem,Sticky
    },
    mixins: [taskAndTag],    
    computed: {
        ...mapState({
            uid: state => state.vux.uid,

            projects:state => state.z39.projects
        })
    },
    watch: {
      "projects":function(){
          this.setProjsBtn();
      }
    },
    created () {
        this.initBtns();
    },
    mounted () {
      this.getTagsrec().then(data => {
          if(data.errno) return this.menuUsed =[{name:"常用:"},{key:"",name:"全部"}] ;          
          //data = data.data;
          data.unshift({key:"",name:"全部"});
          data.unshift({name:"常用:"});
          this.menuUsed =data;
      })
      var timemenu = [{ name: "时间:" }, { key: "", name: "全部" }];
      var first = moment().subtract(1, 'y') ;
      var thisYear = moment().format("YYYY");
      var nowYear = first.format("YYYY") ;
      var temp,pre;
      var tempT = [];
      // pre = thisYear!=nowYear?first.format("M月"):first.format("YY-M");
      // tempT.push({name:pre,key:first.format("YYYY-MM")})
      for (var i = 0; i < 14; i++) {
        temp = first.add(1, 'months') ;
        nowYear = temp.format("YYYY") ;
        pre = thisYear==nowYear?temp.format("M月"):temp.format("YY-M");
        tempT.unshift({name:pre,key:temp.format("YYYY-MM")})
      };
      this.menuTime = timemenu.concat(tempT) ;
      this.setProjsBtn();
    },
    beforeDestroy () {
      this.$vux && this.$vux.bus && this.$vux.bus.$off('vux:after-view-enter', this.bindSticky)
    },
    methods: {
      bindSticky () {
        // let _this = this ;
        this.$nextTick(() => {
          console.log("bind ", this.$refs.listenBarP.$el);
          var last = this.menuBase.length -1 ;
          stickySort(this.$refs.listenBarP.$el , {
            scrollBox: "vux_view_box_body",
            offset: this.offset,
            checkStickySupport: false
          },this)
        })
      },
      setProjsBtn(){
        // if(this.projects.length==0) return ;  //不影响,测试没报错.看代码也正常.
          this.menuProjs = [{title:"项目:"},{id:"",title:"全部"}].concat(this.projects) ;
          setTimeout(() => { this.bindSticky() },1000);
          console.log("bindSticky")
          this.$vux && this.$vux.bus && this.$vux.bus.$on('vux:after-view-enter', this.bindSticky)
      },
      onTab(indexg,item){
          this.menuSelect[indexg] = item.key || item.id ;
          if(item.key) keyNameDic[item.key] = item.name ;
          if(item.id) keyNameDic[item.id] = item.title.substr(0,4) ;
          // console.log("click:",indexg,item)
          this.linkageBtn(indexg,item);
          this.doWith(item);
      },
      linkageBtn(indexg,item){
        if(indexg == 0 && this.menuSelect[2] ){          
          this.menuSelect[2] = "" ;
        }else if(indexg == 2 && this.menuSelect[0]){
          this.menuSelect[0] = "done" ;
          keyNameDic["done"] = "完成" ;
        }
      },
      doWith(item){
          item = item || {} ;
          var state,key,month ;
          let data = {};
          let tags={} ;
          for(var index in this.menuSelect){
            key = this.menuSelect[index];
            switch(index){
              case "0":
                if(key) {
                  data.state =key ;
                }
                break;
              case "1":
                if(key) tags[key] = "" ; 
                break;
              case "2":
                if(key) {
                  data.timeDiff = key ; 
                  data.sql = true ;
                }
                break;
              case "3":
                if(key) {
                  data.need = key ; //需要完善修改逻辑
                  data.sql = true ;
                }
                break;
              case "4":
                if(key)tags.due = key ;
                  
                break;
              case "5":
                if(key) tags[key] = "" ; 
                break;
              case "6":
                if(item.id) data.pid = item.id ; 
                break;
              default :
                console.log("default:",index,key);
            }
          }
          // keyNameDic[item.key] = item.name || item.title;
          var p="";
          var params = "";
          var paramsTags = "";
          var tagValue,keyValue ;
          var selectedTxt = "";
          var temp;
          for(var key in data){
            keyValue = data[key];
            params += (params?"&":"")+ `${key}=${keyValue}` ;
            temp = keyNameDic[keyValue];
            if(keyValue && temp ) selectedTxt += (selectedTxt?" • ":"")+ temp ;
          }
          for(var tagKey in tags){
            tagValue = tags[tagKey] ;
            paramsTags+= (paramsTags?",":"")+tagKey + (tagValue?`:${tagValue}`:"");
            temp = keyNameDic[tagKey] || keyNameDic[tagValue];
            if(tagKey && temp) selectedTxt += (selectedTxt?" • ":"")+ temp;
            
          }
          if(paramsTags) data.key = paramsTags ;
          data.tags = tags ; //在界面接受到tags数据时最好删除.
          selectedTxt = selectedTxt || "全部";
          // console.log("selectedTxt:",selectedTxt);
          this.selectedLabel = selectedTxt ;
          this.$emit("select",data);
          // p = params + (paramsTags?`&key=${paramsTags}`:"");
          // p = p?"?"+p:"";
          // console.log("click",p,params,data) ; 
      },
      initBtns(){
          this.menuSelect[0] = "done" ;
          keyNameDic["done"] = "完成" ;
          // this.menuSelect[2] = "b" ;
          // keyNameDic["b"] = "准时" ;
          this.menuSelect[4] = moment().format("YYYY-MM") ;
          keyNameDic["b"] = moment().format("M") + "月" ;
          this.doWith();
      },
      ...mapActions([
          
      ])
    },
    props: ['scrollBox', 'offset', 'checkStickySupport','type'],
    data() {
      return { 
          listshow:false ,
          stateA:true ,
          selectedLabel:"",
          menuBase:basemenu,
          menuPrice:pricemenu,
          menuSelect:{0:"",1:"",2:"",3:"",4:"",5:"",6:"",7:""},
          menuUsed:[],
          menuTime:[],
          menuProjs:[],
          menuMembs:[],
          menuParts:[],
      }
    }
}

</script>
<style scoped>
.packup-enter-active, .packup-leave-active {
    transition: all .5s;
}
.packup-leave-active {
    transform: translate3d(0, -135px, 0);
}
.packup-enter {
    transform: translate3d(0, -135px, 0);
}
.packup-leave {
    transform: translate3d(0, 0 , 0);
}
.border{
     border-bottom: 1px solid #D9D9D9;
}

.sortshow{
       text-align: center;
       background-color: #fff;
}

.active-tab {
  color: rgb(55, 174, 252) !important;
  border-color: rgb(55, 174, 252) !important;
}

#c_sortlist .weui-cells {
    margin-top: 4px;
}

#c_sortlist .weui-search-bar:before {
    height: 0;
    border-top: 0;
}

#c_sortlist .vux-tab{padding:2px 6px ;
    height: 32px;display:block;white-space: nowrap;}
#c_sortlist .vux-tab .vux-tab-item{display:inline-block;padding:0 6px;margin:auto 2px;width:auto;background: #fff;
    line-height: 28px;    font-size: 16px;}
#c_sortlist .vux-tab .vux-tab-disabled{color: #0e9ae2;display:inline-block;width:46px;padding:0;margin:auto;}
#c_sortlist .vux-tab .vux-tab-selected {
    background: rgba(0, 169, 255, 0.24);border-radius: 6px;
}

</style>
